<!--
 * @Author: panda-hbd 1511539537@qq.com
 * @Date: 2022-11-13 14:40:23
 * @LastEditors: panda-hbd 1511539537@qq.com
 * @LastEditTime: 2022-11-16 13:34:44
 * @FilePath: \text-online-system2\src\views\Test.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template >
<ul v-infinite-scroll="load" class="infinite-list" style="overflow: hidden">
    <el-timeline  v-for=" item in testList" :key="i" class="infinite-list-item">
      <el-timeline-item :timestamp="item.publishTime" placement="top" >
        <el-card style="width: 75rem;" @click="startDoHomework(item.id,item.paperId)">
            <TestItem :data="item"></TestItem>
        </el-card>
      </el-timeline-item>
      <el-timeline-item style="display:none">
      </el-timeline-item>
    </el-timeline>
</ul>
  </template>

  <script>
import TestItem from '../components/TestItem.vue'
import paper from '../api/paper.js'
import {mapGetters,mapMutations} from 'vuex'

export default {
    name: 'TestView',
    components: {
      TestItem,
    },
    data() {
        return {
          count:0,
          testList:[]
        };
    },

    mounted() {
        this.initData()
    },

    methods: {

      initData(){
          paper.getAllExamPapersByClassId(this.getCurrentClassId).then((res)=>{
                      if(res.code == 1 ){
                            console.log(res.data)
                            this.testList = res.data
                      }
          })
      }
      ,

        load(){
          // console.log(this.count);
            this.count += 2
        },
        startDoHomework(id,paperId){
          this.setCurrentPaperId(paperId)
          this.setCurrentClassPaperId(id)
          this.$router.push('/doingTest')
        },

        ...mapMutations(['setCurrentPaperId','setCurrentClassPaperId'])
    },

    computed:{
       ...mapGetters(['getCurrentClassId'])
    }
};
</script>


<style scoped>
        .infinite-list {
        /* height: 700px; */
        padding: 0;
        margin: 0;
        list-style: none;
      }
      .infinite-list .infinite-list-item {
        display: flex;
        /* align-items: center; */
        /* justify-content: center; */
        /* height: auto; */
        /* background: var(--el-color-primary-light-9); */
        margin: 10px;
        color: var(--el-color-primary);
      }
      .infinite-list .infinite-list-item + .list-item {
        margin-top: 10px;
      }
 
  </style>
  